<template>
    <div class="expandCustomerIndexSet">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>标准管控</el-breadcrumb-item>
            <el-breadcrumb-item>标准管理</el-breadcrumb-item>
            <el-breadcrumb-item>拓客指标设置</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
            <el-form-item label="年度：">
                <el-date-picker
                        v-model="searchForm.year"
                        type="year"
                        value-format="yyyy"
                        placeholder="选择年">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="区域：">
                <el-select v-model="searchForm.area" placeholder="请选择" @change="selectArea" filterable>
                    <el-option
                            v-for="item in areaList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="片区：">
                <el-select v-model="searchForm.region" placeholder="请选择" filterable>
                    <el-option
                            v-for="item in regionList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="指标：">
                <el-select v-model="searchForm.standardType" placeholder="请选择">
                    <el-option
                            v-for="item in targetList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchHandle" id="monitorEnter">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetSearchForm">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="totalDom">
            <div class="total-item">
                <div class="item-part">
                    <div class="part-content">拜访量</div>
                    <div class="part-content">拜访量指标：{{visitMap.allCount | numFilter}}</div>
                </div>
                <div class="item-part">
                    <div class="part-content"></div>
                    <div class="part-content">已分配指标：{{visitMap.allocated | numFilter}}</div>
                </div>
                <div class="item-part">
                    <div class="part-content"></div>
                    <div class="part-content">待分配指标：{{visitMap.unallocated | numFilter}}</div>
                </div>
            </div>
            <div class="total-item">
                <div class="item-part">
                    <div class="part-content">拓店量</div>
                    <div class="part-content">拓店量指标：{{standardMap.allCount | numFilter}}</div>
                </div>
                <div class="item-part">
                    <div class="part-content"></div>
                    <div class="part-content">已分配指标：{{standardMap.allocated | numFilter}}</div>
                </div>
                <div class="item-part">
                    <div class="part-content"></div>
                    <div class="part-content">待分配指标：{{standardMap.unallocated | numFilter}}</div>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <el-button type="primary" size="small" @click="fn('add')">新增</el-button>
            <el-button size="small" @click="importHandle">导入</el-button>
        </div>
        <el-table :data="tableData" border style="margin-top: 20px;">
            <el-table-column prop="regionName" label="片区">
                <template slot-scope='scope'>
                    <el-button type="text" @click="fn('view',scope.row)">{{scope.row.regionName}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="areaName" label="区域"></el-table-column>
            <el-table-column prop="standardType" label="指标">
                <template slot-scope="scope">
                    {{scope.row.standardType==1? '拜访量':''}}
                    {{scope.row.standardType==2? '拓店量':''}}
                </template>
            </el-table-column>
            <el-table-column prop="year" label="年份"></el-table-column>
            <el-table-column prop="summary" label="汇总指标"></el-table-column>
            <el-table-column prop="january" label="1月份"></el-table-column>
            <el-table-column prop="february" label="2月份"></el-table-column>
            <el-table-column prop="march" label="3月份"></el-table-column>
            <el-table-column prop="april" label="4月份"></el-table-column>
            <el-table-column prop="may" label="5月份"></el-table-column>
            <el-table-column prop="june" label="6月份"></el-table-column>
            <el-table-column prop="july" label="7月份"></el-table-column>
            <el-table-column prop="august" label="8月份"></el-table-column>
            <el-table-column prop="september" label="9月份"></el-table-column>
            <el-table-column prop="october" label="10月份"></el-table-column>
            <el-table-column prop="november" label="11月份"></el-table-column>
            <el-table-column prop="december" label="12月份"></el-table-column>

            <el-table-column label="操作" min-width="130px">
                <template slot-scope='scope'>
                    <el-button type="text" @click="fn('edit',scope.row)" :disabled="scope.row.year<currentYear">编辑</el-button>
                    <el-button type="text" @click="fn('view',scope.row)">指标详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next,jumper"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>
    </div>
</template>

<script>

export default {
    name:"expandCustomerIndexSet",
    title: '拓客指标设置',
    created() {
        this.currentYear = new Date().getFullYear()
        this.getAreaList()
        this.selectArea()
        this.searchList()
    },
    activated(){
        this.searchList()
    },

    mounted() {},
    components: {},
    data() {
        return {
            currentYear: '',
            searchForm: {
                year: new Date(),
                area: undefined,
                region: undefined,
                standardType: undefined,
            },
            areaList: [],// 区域
            regionList: [],// 片区
            targetList: [
                {id: undefined, name: '全部'},
                {id: 1, name: '拜访量'},
                {id: 2, name: '拓店量'},
            ],// 指标
            visitMap: {},// 拜访量
            standardMap: {},// 拓客量
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            totalSize: 0
        }
    },
    methods: {
        searchHandle(){
            this.currentPage = 1
            this.searchList()
        },
        // 区域列表
        getAreaList(){
            this.$axios.get('/cms/sys/region/getAreaList').then(res=>{
                this.areaList = res
                this.areaList.unshift({id:undefined,name:'全部'})
            })
        },
        selectArea(){
            this.searchForm.region = undefined
            this.$axios.post('/cms/sys/region/getRegionList',{areaId:this.searchForm.area}).then(res=>{
                this.regionList = res
            })
        },
        resetSearchForm(){
            this.searchForm = {
                year: new Date(),
                area: undefined,
                region: undefined,
            }
            this.selectArea()
        },
        searchList () {
            let param = {}
            let yearType = typeof this.searchForm.year
            if(this.searchForm.year && yearType == "object"){
                param.year = this.searchForm.year.getFullYear()
            } else if(yearType == "string"){
                param.year = +this.searchForm.year
            } else {
                param.year = undefined
            }
            param.rangeType = 1
            param.pageNum = this.currentPage
            param.pageSize = this.pageSize

            param.areaId = this.searchForm.area
            param.regionId = this.searchForm.region
            param.standardType = this.searchForm.standardType
            this.$axios.post('/spread/standard/list', param).then(res => {
                this.tableData = res.pageInfo.list
                this.totalSize = res.pageInfo.total
                this.visitMap = res.visitMap ? res.visitMap : {}
                this.standardMap = res.standardMap ? res.standardMap : {}
            })
        },
        // 分页器改变页码
        handleCurrentChange () {
            this.searchList()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.searchList()
        },
        fn(type,row){
            if(type=='add'){
                this.$router.push({path: '/expandCustomerIndexSetOp', query: {type: 'add'}})
            } else if(type=='edit'){
                this.$router.push({path: '/expandCustomerIndexSetOp', query: {type: 'edit',id: row.id}})
            } else if(type=='view'){
                this.$router.push({path: '/personIndexSet',
                    query:{
                        areaId:row.areaId,
                        areaName:row.areaName,
                        regionId:row.regionId,
                        regionName:row.regionName,
                        year:row.year,
                        standardType:row.standardType,
                    }
                })
            }
        },
        importHandle(){
            this.$router.push({path: '/expandCustomerIndexSetImp'})
        }
    },
    computed: {},
    filters: {
        numFilter(val){
            if(val) {
                return val
            } else {
                return '--'
            }
        }
    }
}
</script>
<style lang="stylus">
    .expandCustomerIndexSet {
        .totalDom{
            display: flex;
            .total-item{
                flex:1;
                border: 1px solid #EBEEF5;
                border-radius: 4px;
                padding: 20px;
                display: flex;
                &:nth-child(1){
                    margin-right: 20px;
                }
                .item-part{
                    flex:1;
                    .part-content{
                        height: 30px;
                        line-height: 30px;
                    }
                }
            }
        }
    }
</style>
